<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>计算属性</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>计算属性</h1>
    <hr/>
    <div id="app">
        <p>{{newPrice}}</p>
        <ul>
            <li v-for="item in reversNews">{{item.title}}--{{item.date}}</li>
        </ul>
    </div>

    <script>
        newsList = [
                {title:'习近平主持金砖国家领导人第九次会晤',date:'2017/09/01'},
                {title:'二线城市抢人才大战：送钱、送房子、送户口',date:'2017/09/02'},
                {title:'瑞士双头龟迎20岁生日 "养尊处优"每天洗澡晒太阳',date:'2017/09/03'},
                {title:'《关于支持电视剧繁荣发展若干政策的通知》全文',date:'2017/09/03'},
                {title:'白宫主任上任月余现“裂痕” 被爆曾怒怼特朗普',date:'2017/09/04'},
            ];


        var app = new Vue({
            el: '#app',
            data: {
                price: 100,
                newsList: newsList
            },
            computed: {
                newPrice: function(){
                    return "￥"+this.price+"元";
                },
                reversNews: function(){
                    return this.newsList.reverse();
                }
            }
        });
    </script>

</body>
</html>